<template>
  <div class="login-box">
    <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
    <el-container>
      <el-header>抢课系统</el-header>
      <!-- <el-main> -->
        <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
            <!-- <span class="login-title">抢课系统</span> -->
            <div style="margin-top: 5px"></div>
            <el-form-item label="用户名" prop="loginName">
              <el-col :span="22">
                <el-input type="text" v-model="loginForm.loginName"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="loginPassword">
              <el-col :span="22">
                <el-input type="password" v-model="loginForm.loginPassword"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="确认密码" prop="logincheckpass">
              <el-col :span="22">
                <el-input type="password" v-model="loginForm.logincheckpass"></el-input>
              </el-col>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="loginSubmit('loginForm')" >登录</el-button>
            <el-button type="primary" plain @click="onRegit('loginForm')">注册</el-button>
          </el-form-item>
        </el-form>
      <!-- </el-main> -->
    </el-container>
      <!-- <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
        <span class="login-title">抢课系统</span>
        <div style="margin-top: 5px"></div>
        <el-form-item label="用户名" prop="loginName">
          <el-col :span="22">
            <el-input type="text" v-model="loginForm.loginName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="loginPassword">
          <el-col :span="22">
            <el-input type="password" v-model="loginForm.loginPassword"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="logincheckpass">
          <el-col :span="22">
            <el-input type="password" v-model="loginForm.logincheckpass"></el-input>
          </el-col>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="loginSubmit('loginForm')">登录</el-button>
        <el-button type="primary" plain @click="onRegit('loginForm')">注册</el-button>
      </el-form-item>
    </el-form> -->
    {{ login_info }}
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
    //   var validatePass = (rule, value, callback) => {
		// 	if (value === '') {
		// 		callback(new Error('请输入密码'));
		// 	} else {
		// 		if (this.loginForm.checkPass !== '') {
		// 			this.$refs.loginForm.validateField('logincheckpass');
		// 		}
		// 		callback();
		// 	}
		// };
 
		// var validatePass2 = (rule, value, callback) => {
		// 	if (value === '') {
		// 		callback(new Error('请再次输入密码'));
		// 	} else if (value !== this.loginForm.loginPassword) {
		// 		callback(new Error('两次输入密码不一致!'));
		// 	} else {
		// 		callback();
		// 	}
		// };

      return {
        login_info: "",
        loginForm: {
          loginName: '',
          loginPassword: '',
          logincheckpass:''
        },
        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        loginFormRules: {
          loginName: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          loginPassword: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ],
          logincheckpass: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      onRegit(formName) {
        // 为表单绑定验证功能
        if (this.loginForm.loginPassword !== this.loginForm.logincheckpass){
             this.login_info = "注册失败"
            return false
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = new FormData()
            data.append('userid',this.loginForm.loginName)
            data.append('password',this.loginForm.loginPassword)
            this.$axios.post('api/register/', data).then((res) => {
              if(res.data["register"] === "true"){
                alert("注册成功")
                sessionStorage.setItem("userid", this.loginForm.loginName)
                sessionStorage.setItem("login", "true")
                sessionStorage.setItem("token", res.data["token"])
                this.$router.push("/user")
              } else {
                this.login_info = "注册失败"
                console.log("register error")
                return false;
              }
            }).catch((res) => {
              console.log("error submit")
              return false
            })
          } else {
            return false
          }
        })
      },
      loginSubmit(formName) {
        // 为表单绑定验证功能
        if (this.loginForm.loginPassword !== this.loginForm.logincheckpass){
            this.login_info = "用户名或密码或确认密码错误"
            return false
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {

            if(this.loginForm.loginName == 'abcd' && this.loginForm.loginPassword == 'abcd'){
              this.$router.push("/Admin")
            }
            let data = new FormData()
            data.append('userid', this.loginForm.loginName)
            data.append('password', this.loginForm.loginPassword)
            this.$axios.post('/api/login/', data).then((res) => {
              if(res.data["login"] === "true"){
                sessionStorage.setItem("userid", this.loginForm.loginName)
                sessionStorage.setItem("login", "true")
                sessionStorage.setItem("token", res.data["token"])
                this.$router.push("/user")
              } else {
                if(res.data["login_cnt"] !== undefined){
                  this.login_info = "用户名或密码错误，该用户名连续登录失败" + res.data["login_cnt"] + "次。连续错误3次需等待30秒才能再次登录。"
                } else if(res.data["login_wait"] !== undefined){
                  this.login_info = "用户名或密码错误，该用户名连续登录失败3次，请"+res.data["login_wait"]+"秒后再试"
                } else {
                  this.login_info = "用户名或密码错误"
                }
                console.log("password error!!")
              }
              return false;
            }).catch((res) => {
              this.login_info = "用户名或密码错误"
              console.log("error submit!!")
              return false
            })
          } else {
            this.login_info = "用户名或密码错误"
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login-box {
    border: 1px solid #122349;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    /*box-shadow: 0 0 25px cornflowerblue;*/
  }
  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: rgb(54, 103, 194);
    font-size: 25px;
    font-weight: bold;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    font-weight: bold;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>
